<template>
  <div>
    <div class="card card-custom gutter-b example example-compact" id="tableBody">
      <div class="card-header">
        <div class="card-title">
          <span class="card-icon">
            <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
          </span>
          <h3 class="card-label"> 查询区域 </h3>
        </div>
        <div class="card-toolbar">
          <div class="example-tools justify-content-center">
            <!-- <span data-toggle="tooltip" class="example-toggle"></span>
            <span data-toggle="tooltip" class="example-copy"></span> -->
          </div>
        </div>
      </div>
      <div class="card-body">
        <!--查询条件-->
        <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
          <div class="m-portlet__body">
            <div class="form-group m-form__group row">
              <label class="col-form-label">隶属部门:</label>
              <div class="col-md-2">
                <input type="text" class="form-control" v-model="searchForm.departInfoName" placeholder="请输入">
              </div>
              <label class="col-form-label">岗位:</label>
              <div class="col-md-2">
                <input type="text" class="form-control" v-model="searchForm.postName" placeholder="请输入">
              </div>
              <label class="col-form-label">姓名:</label>
              <div class="col-md-2">
                <input type="text" class="form-control" v-model="searchForm.name" placeholder="请输入">
              </div>
              <label class="col-form-label">账号:</label>
              <div class="col-md-2">
                <input type="text" class="form-control" v-model="searchForm.account" placeholder="请输入">
              </div>
            </div>
            <div class="form-group m-form__group row">
              <label class="col-form-label">身份证号:</label>
              <div class="col-md-2">
                <input type="text" class="form-control" v-model="searchForm.idCard" placeholder="请输入">
              </div>
              <label class="col-form-label">邮箱:</label>
              <div class="col-md-2">
                <input type="text" class="form-control" v-model="searchForm.email" placeholder="请输入">
              </div>
              <label class="col-form-label">联系电话:</label>
              <div class="col-md-2">
                <input type="text" class="form-control" v-model="searchForm.phone" placeholder="请输入">
              </div>
              <b-button :pressed="false" variant="btn btn-light-primary font-weight-bold font-size-sm py-3 px-8 mr-2 " @click="search()"><span><i
                    class="flaticon-search-magnifier-interface-symbol"></i><span>查 询</span></span></b-button>
              <b-button :pressed="false" variant="btn btn-light font-weight-bold font-size-sm py-3 px-8 mr-2 " @click="resetAll()">
                <span><i class="flaticon2-refresh"></i><span>重 置</span></span></b-button>
            </div>
          </div>
          <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
            <div class="m-form__actions m-form__actions--solid">
              <div class="row">
                <div class="col m--align-left">
                  <button class="btn btn-light-primary font-weight-bold font-size-sm py-3 px-8 mr-2 "
                    v-permission="{ action: '/sysUserInfo/add', effect: 'disabled' }" @click="addSysUserInfo">
                    <span><i class="la la-plus la-lg"></i><span>新建用户资料</span></span>
                  </button>
                </div>
                <div class="col m--align-right">

                  <button class="btn btn-light-success font-weight-bold font-size-sm py-3 px-8 mr-2"
                    @click="initListDeleted">
                    <span><i class="fa fa-history fa-lg"></i><span>找回用户</span></span>
                  </button>

                  <button class="btn btn-light-primary font-weight-bold font-size-sm py-3 px-8 mr-2"
                    @click="changeShowType">
                    <span><i class="fas fa-band-aid fa-lg"></i><span>切 换</span></span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- card 布局 -->
      <el-card style="padding-bottom: 10px" v-if="this.showType != 'grid'">
        <el-row :gutter="30">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" v-for="(item, index) in userDataList" :key="index"
            style="margin-bottom: 30px; text-align: center">
            <div class="card card-custom gutter-b card-stretch">
              <!--begin::Body-->
              <div class="card-body pt-4">
                <!--begin::User-->
                <div class="d-flex align-items-end mb-7">
                  <!--begin::Pic-->
                  <div class="d-flex align-items-center">
                    <!--begin::Pic-->
                    <div class="flex-shrink-0 mr-4 mt-lg-0 mt-3">
                      <div class="symbol symbol-circle symbol-lg-75">
                        <img src="/media/users/default.jpg" alt="image">
                      </div>
                      <div class="symbol symbol-lg-75 symbol-circle symbol-primary d-none">
                        <span class="font-size-h3 font-weight-boldest">{{ item.account }}</span>
                      </div>
                    </div>
                    <!--end::Pic-->
                    <!--begin::Title-->
                    <div class="d-flex flex-column">
                      <a href="#" class="text-dark font-weight-bold text-hover-primary font-size-h4 mb-0">{{ item.name
                        }}</a>
                      <span class="text-muted font-weight-bold">{{ item.account }}</span>
                    </div>
                    <!--end::Title-->
                  </div>
                  <!--end::Title-->
                </div>
                <!--end::User-->
                <!--begin::Desc-->
                <p class="mb-7">

                </p>
                <!--end::Desc-->
                <!--begin::Info-->
                <div class="mb-7">
                  <div class="d-flex justify-content-between align-items-center">
                    <span class="text-dark-75 font-weight-bolder mr-2">邮&nbsp;&nbsp;&nbsp;&nbsp;箱:</span>
                    <a href="javascript:void(0)" class="text-muted text-hover-primary">{{ item.email }}</a>
                  </div>
                  <div class="d-flex justify-content-between align-items-cente my-1">
                    <span class="text-dark-75 font-weight-bolder mr-2">手机号:</span>
                    <a href="javascript:void(0)" class="text-muted text-hover-primary">{{ item.phone }}</a>
                  </div>
                  <div class="d-flex justify-content-between align-items-center">
                    <span class="text-dark-75 font-weight-bolder mr-2">地&nbsp;&nbsp;&nbsp;&nbsp;址:</span>
                    <span class="text-muted font-weight-bold">{{ item.address }}</span>
                  </div>
                  <div class="d-flex justify-content-between align-items-center">
                    <span class="text-dark-75 font-weight-bolder mr-2">身份证:</span>
                    <span class="text-muted font-weight-bold">{{ item.idCard }}</span>
                  </div>
                  <div class="d-flex justify-content-between align-items-center">
                    <span class="text-dark-75 font-weight-bolder mr-2">性&nbsp;&nbsp;&nbsp;&nbsp;别:</span>
                    <span class="text-muted font-weight-bold">{{ item.sex }}</span>
                  </div>
                  <div class="d-flex justify-content-between align-items-center">
                    <span class="text-dark-75 font-weight-bolder mr-2">入职日期:</span>
                    <span class="text-muted font-weight-bold">{{ item.inTime }}</span>
                  </div>
                </div>
                <!--end::Info-->
                <!-- <b-row>
                        <b-col lg="2" class="pb-2">
                          <el-button type="primary" icon="el-icon-edit" circle></el-button>
                        </b-col>
                        <b-col lg="2" class="pb-2">
                        </b-col>
                        <b-col lg="2" class="pb-2">
                        </b-col>
                    </b-row> -->
                <b-button-group size="sm">
                  <b-button variant="primary" @click="getSysUserInfoDetail(item)">详 情</b-button>
                  <b-button variant="success" @click="updateSysUserInfo(item)"
                    v-permission="{ action: '/sysUserInfo/update', effect: 'disabled' }">编 辑</b-button>
                  <b-button variant="danger" @click="delSysUserInfo(item)"
                    v-permission="{ action: '/sysUserInfo/update', effect: 'disabled' }">删 除</b-button>
                  <b-dropdown right split text="操作">
                    <b-dropdown-item v-permission="{ action: '/sysUserInfo/syncOauth', effect: 'disabled' }"
                      @click="syncOauth(item)">同步至授权中心</b-dropdown-item>
                    <b-dropdown-item @click="initRoleinfo(item)">角色权限</b-dropdown-item>
                    <b-dropdown-divider></b-dropdown-divider>
                    <b-dropdown-item @click="resetAccountPwd(item)"
                      v-permission="{ action: '/sysUserInfo/restPwd', effect: 'disabled' }">重置密码</b-dropdown-item>
                  </b-dropdown>
                </b-button-group>
              </div>
              <!--end::Body-->
            </div>
          </el-col>
        </el-row>
        <el-empty description="暂无数据" v-if="null == userDataList"></el-empty>
      </el-card>
      <!--分页组件-->
      <el-table style="width: 100%" v-if="this.showType == 'grid'" stripe border
        @selection-change="handleSelectionChange" highlight-current-row :data="userDataList">

        <template slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column label="序号" min-width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="account" label="账号" min-width="100"></el-table-column>
        <el-table-column align="center" prop="name" label="姓名" min-width="100"></el-table-column>
        <el-table-column align="center" prop="idCard" label="身份证号" min-width="180"></el-table-column>
        <el-table-column align="center" prop="phone" label="联系电话" min-width="110"></el-table-column>
        <el-table-column align="center" prop="email" label="邮箱" min-width="180"></el-table-column>
        <el-table-column align="center" label="性别" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.sex }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="inTime" label="入职日期" min-width="100"></el-table-column>
        <el-table-column align="center" label="操作" fixed="left" min-width="280">
          <template slot-scope="scope">
            <!--scope.row当前行的对象-->
            <button class="btn btn-link" v-permission="{ action: '/sysUserInfo/update', effect: 'disabled' }"
              @click="updateSysUserInfo(scope.row)">
              <span><i class="la la-pen-alt"></i><span>编 辑</span></span>
            </button>
            <!-- :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
            <button class="btn btn-link-danger" v-permission="{ action: '/sysUserInfo/delete', effect: 'disabled' }"
              @click="delSysUserInfo(scope.row)">
              <span><i class="far fa-trash-alt"></i><span>删 除</span></span>
            </button>
            <button @click="getSysUserInfoDetail(scope.row)" class="btn btn-link" title="详情">详 情</button>
            <button @click="initRoleinfo(scope.row)" class="btn btn-link" title="角色权限">角色权限</button>
            <button @click="resetAccountPwd(scope.row)" v-permission="{ action: '/sysUserInfo/restPwd', effect: 'disabled' }"
              class="btn btn-link" title="重置密码">重置密码</button>
            <button class="btn btn-link-success" v-permission="{ action: '/sysUserInfo/syncOauth', effect: 'disabled' }"
              @click="syncOauth(scope.row)">
              <span><i class="la la-arrow-right la-lg"></i><span>同步至授权中心</span></span>
            </button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageNo" :page-sizes="[5, 10, 30, 50]" :page-size="pageSize"
          layout="->,total, sizes, prev, pager, next, jumper" :total="totalCount">
        </el-pagination>
      </div>
    </div>
    <UserAdd ref="userAddRef" @change="search"></UserAdd><!--采用父窗口关闭传递的方法-->
    <UserUpdate ref="userUpdateRef" @change="search"></UserUpdate><!--采用父窗口关闭传递的方法-->
    <UserDetail ref="userDetailRef"></UserDetail>
    <UserDelete ref="userDeleteRef" @change="search"></UserDelete><!--采用父窗口关闭传递的方法-->
    <UserRole ref="userRoleRef"></UserRole>
    <SyncUserRole ref="syncUserRef" @change="search"></SyncUserRole>
  </div>

</template>
<style scoped>
.el-card {
  border: 0px solid #EBEEF5 !important;
}

.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: 0 2px 12px 0 var(--v-secondary-lighten1) !important;
}
</style>
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import UserAdd from "@/view/sys/sys-user-info/sys-user-info-add.vue";
import UserUpdate from "@/view/sys/sys-user-info/sys-user-info-update.vue";
import UserDetail from "@/view/sys/sys-user-info/sys-user-info-detail.vue";
import UserDelete from "@/view/sys/sys-user-info/sys-user-info-list-delete.vue";
import UserRole from "@/view/sys/sys-user-info/user-role.vue";
import SyncUserRole from "@/view/sys/sys-user-info/sync.vue";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
  data() {
    return {
      showType: 'grid',
      searchForm: { account: "", name: "", departInfoName: "", postName: "", idCard: "", phone: "", email: "" },
      userDataList: [],
      sels: [], //当前选框选中的值
      pageNo: 1,      // 默认当前是第一页
      pageSize: 10,    // 当前每页的数据是5条
      totalCount: 0   // 总数默认为0
    }
  },
  components: {
    UserAdd,
    UserUpdate,
    UserDetail,
    UserDelete,
    UserRole,
    SyncUserRole
  },
  mounted() {
    this.$store.dispatch(SET_BREADCRUMB, [{ title: "用户管理" }]);
    this.initList();   // 按当前的页号和每页的数据量进行查询
  },
  methods: {
    initList() {
      showWating({ renderBody: "tableBody" });
      var params = {};
      params.usePageNo = true;//采用第几页进行分页（兼容）
      params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
      params.pageNo = this.pageNo;//开始的记录序号   
      params.searchJson = JSON.stringify(this.searchForm);//为form元素     
      apiUtil.queryPage(process.env.VUE_APP_SYS_API + "/sysUserInfo/list", params).then(({ data }) => {
        this.userDataList = data.data;//给结果集赋值
        this.totalCount = data.total;// 获取当前数据的总数    
        this.getGender();
      });
    },
    handleSelectionChange(sels) {//获取选中的值
      this.sels = sels;
      console.log("选中的值", sels.map((item) => item.id));
    },
    addSysUserInfo() {//新建用户
      this.$refs.userAddRef.showModal()
    },
    updateSysUserInfo(row) {// 更新用户
      this.$refs.userUpdateRef.showModal(row.id);
    },
    delSysUserInfo(row) { // 删除用户
      // 删除前提示
      this.$confirm("确认删除记录吗?", "提示", { type: "warning", }).then(() => {
        apiUtil.delete(process.env.VUE_APP_SYS_API + "/sysUserInfo/delete?id=" + row.id).then(data => {
          if (data.data.success) {
            handleAlert("删除成功", "success", 3);
            this.search();
          } else {
            handleAlert("删除失败", "error", 3);
          }
        });
      }).catch(() => { });//注意这里，这里是重点！！！;        
    },
    handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
      this.pageSize = val;  // 修改页的大小
      this.initList();       // 按新的pageNo和pageSize进行查询
    },
    handleCurrentChange(val) { // 修改当前页所触发的函数
      this.pageNo = val;       // 更新当前的页
      this.initList();          // 按新的pageNo和pageSize进行查询
    },
    search() {
      this.pageNo = 1;       // 更新当前的页
      this.initList();          // 按新的pageNo和pageSize进行查询
    },
    resetAll() {
      Object.assign(this.$data.searchForm, this.$options.data().searchForm);
      this.search();
    },
    getSysUserInfoDetail(row) {
      this.$refs.userDetailRef.showModal(row.id);
    },
    initListDeleted() {//弹出废弃的用户窗体
      this.$refs.userDeleteRef.showModal();
    },
    initRoleinfo(row) {//角色窗体
      this.$refs.userRoleRef.showModal(row.id);
    },
    resetAccountPwd(row) {//重置密码
      let id = row.id;
      let account = row.account;
      let name = row.name;
      // 重置密码前提示
      this.$confirm('确定要重置姓名：' + name + '，登录账户：' + account + '的密码？', "提示", { type: "warning", }).then(() => {
        var params = { account_id: id, account: account };
        apiUtil.post(process.env.VUE_APP_OAUTH_API + "/oauthAccount/restPwd", params).then(data => {
          if (data.data.success) {
            handleAlert("重置成功", "success", 3);
            this.search();
          } else {
            handleAlert("重置失败", "error", 3);
          }
        });
      }).catch(() => { });//注意这里，这里是重点！！！; 
    },
    getGender: function () {
      this.userDataList.forEach(item => {
        if (null != item.sex && '' != item.sex) {
          apiUtil.get(process.env.VUE_APP_SYS_API + "/sysDataDictionary/get/" + item.sex).then(data => {
            item.sex = data.data.data.name;
          });
        }
      })
    },
    syncOauth(row) {
      this.$refs.syncUserRef.showModal(row.id);
    },
    changeShowType() {
      if (this.showType != 'grid') {
        this.showType = 'grid';
      } else {
        this.showType = 'card';
      }
    }
  }
};
</script>